import {
  password_validate,
  password_confirm_validate,
  mobile_validator,
} from "../utils";
import { drawerFormState } from "../store";
import { LockOutlined } from "@ant-design/icons-vue";
import { countryCodeDict } from "../dict";
export default defineComponent({
  setup(props, {}) {
    return () => {
      return (
        <>
          <a-row class="s-drawer-extra-row">
            <s-title>{$t("base.accountInfo")}</s-title>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span={12}>
              <a-form-item
                label={$t("table80")}
                name="password"
                rules={[
                  {
                    required: true,
                    validator: password_validate(),
                    trigger: ["change"],
                  },
                ]}
              >
                {withDirectiveInput({
                  vNode: (
                    <a-input-password
                      maxlength={13}
                      vModel:value={drawerFormState.password}
                      placeholder={$t("placeholder29")}
                      vSlots={{
                        prefix: (
                          <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                        ),
                      }}
                    />
                  ),
                })}
              </a-form-item>
            </a-col>
            <a-col span={12}>
              <a-form-item
                label={$t("table70")}
                name="password_confirmation"
                rules={[
                  {
                    required: true,
                    validator: password_confirm_validate(),
                    trigger: ["change"],
                  },
                ]}
              >
                {withDirectiveInput({
                  vNode: (
                    <a-input-password
                      maxlength={13}
                      vModel:value={drawerFormState.password_confirmation}
                      placeholder={$t("placeholder30")}
                      vSlots={{
                        prefix: (
                          <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                        ),
                      }}
                    />
                  ),
                })}
              </a-form-item>
            </a-col>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span={12}>
              <a-form-item
                label={$t("table2")}
                name="mobile_number"
                // help={helpRef.value}
                rules={[
                  {
                    required: true,
                    trigger: ["change"],
                    message: "请输入手机号",
                    // validator: mobile_validator,
                  },
                ]}
              >
                {withDirectiveInput({
                  vNode: (
                    <a-input
                      vModel:value={drawerFormState.mobile_number}
                      placeholder={$t("placeholder32")}
                    >
                      {{
                        addonBefore: () => (
                          <a-select
                            allowClear
                            vModel:value={drawerFormState.mobile_area}
                            style="min-width: 120px"
                            placeholder={$t("placeholder31")}
                            options={countryCodeDict}
                            showSearch={true}
                            filterOption={filterOption}
                            onSelect={(value: any, option: any) =>
                              mobile_validator(
                                null,
                                drawerFormState.mobile_number
                              )
                            }
                            onkeyup={({ target }) => only_limit_charts(target)}
                          />
                        ),
                      }}
                    </a-input>
                  ),
                })}
              </a-form-item>
            </a-col>
          </a-row>
        </>
      );
    };
  },
});
